<template>
  <page-header-wrapper>
    <a-card>
      <h3>延期明细</h3>
      <a-table rowKey="id" :columns="columns" :data-source="data">
        <span slot="applyDate" slot-scope="applyDate"> {{ humanizeDate(applyDate) }}</span>
        <span slot="principal" slot-scope="principal"> {{ moneyType(principal) }}</span>
        <span slot="capital" slot-scope="capital"> {{ moneyType(capital) }}</span>
        <span slot="otherAmount" slot-scope="otherAmount"> {{ moneyType(otherAmount) }}</span>
        <span slot="workDate" slot-scope="_, record">
          <DelayDate :record="record" />
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import moment from 'moment'
import { getloanDelay } from '@/api/common'
import { rateTypes } from '@/dict'
const columns = [
  {
    title: '延期本金金额',
    dataIndex: 'principal',
    key: 'principal',
    scopedSlots: { customRender: 'principal' }
  },
  {
    title: '延期资金成本',
    dataIndex: 'capital',
    key: 'capital',
    scopedSlots: { customRender: 'capital' }
  },
  {
    title: '延期申请日期',
    dataIndex: 'applyDate',
    key: 'applyDate',
    scopedSlots: { customRender: 'applyDate' }
  },
  {
    title: '延期时间段',
    dataIndex: 'delayDate',
    key: 'delayDate',
    scopedSlots: { customRender: 'delayDate' }
  },
  {
    title: '利息利率(%)',
    dataIndex: 'delayRate',
    key: 'delayRate'
  },
  {
    title: '贷款限额费(%)',
    dataIndex: 'limitRate',
    key: 'limitRate'
  },
  {
    title: '出借人手续费(%)',
    dataIndex: 'commissionRate',
    key: 'commissionRate'
  },
  {
    title: '其他费用',
    dataIndex: 'otherAmount',
    key: 'otherAmount',
    scopedSlots: { customRender: 'otherAmount' }
  },
  {
    title: '退出费(%)',
    dataIndex: 'exitRate',
    key: 'exitRate'
  }
  // {
  //   title: '生效日期',
  //   dataIndex: 'workDate',
  //   key: 'workDate',
  //   scopedSlots: { customRender: 'workDate' }
  // }
]
export default {
  name: 'Delay',
  data() {
    return {
      data: []
    }
  },
  components: {
    DelayDate: () => import('./com/DelayDate.vue')
  },
  computed: {
    columns() {
      if (this.$auth('agreementList.update')) {
        return [
          ...columns,
          {
            title: '生效日期',
            dataIndex: 'workDate',
            key: 'workDate',
            scopedSlots: { customRender: 'workDate' }
          }
        ]
      } else {
        return columns
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    humanizeDate(v) {
      if (v) {
        return moment(v * 1000).format('YYYY-MM-DD') || '--'
      } else {
        return '-'
      }
    },
    moneyType(v) {
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    async getData() {
      const form = {
        approve: 2,
        asseApprove: 2,
        projectId: this.$route.query.id
      }
      const res = await getloanDelay(form)
      this.data = res.result.data.list
      this.data.forEach(el => {
        el.delayDate =
          moment(el.delayStartDate * 1000).format('YYYY/MM/DD') +
          '-' +
          moment(el.delayEndDate * 1000).format('YYYY/MM/DD')
        var i = el.delayRateUnit
        el.delayRate = `${rateTypes.find(el => el.value == i).text}-${el.delayRate}`
      })
    }
  }
}
</script>
<style scoped>
.width {
  width: 150px;
}
</style>
